/**
 * The definition of the Map.
 */
var mapmatrix = [
        [[0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 4, 3, 2, 1, 0],
        [0, 0, 0, 0, 0, 0, -1, 0],
        [0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0]]
][0];

/*
        The definition of the direction.
        North:0
        East:1
        South:2
        West:3
*/
var dir = 1;

//The initial index x and y of the bird.
var init_x = 0;
var init_y = 0;

var ROWS = mapmatrix.length;
var COLS = mapmatrix[0].length;
var tileID = 0;

var xmlns = "http://www.w3.org/2000/svg";
var svg = document.getElementById('svgMaze');

var drawMap = function () {
        for (var y = 0; y < ROWS; y++) {
                for (var x = 0; x < COLS; x++) {
                        if (mapmatrix[y][x] === 0) {
                                var text = document.createElementNS(xmlns, 'text');
                                arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
                                pos = Math.round(Math.random() * (arr.length - 1));
                                text.setAttribute('id', 'text' + tileID);
                                text.innerHTML = arr[pos];
                                text.setAttribute('x', x * 50);
                                text.setAttribute('y', y * 50);
                                svg.appendChild(text);
                                tileID++;
                        } else if (mapmatrix[y][x] === 1) {
                                var text = document.createElementNS(xmlns, 'text');
                                text.setAttribute('id', 'text' + tileID);
                                text.innerHTML = 'E';
                                text.setAttribute('x', x * 50);
                                text.setAttribute('y', y * 50);
                                svg.appendChild(text);
                                tileID++;
                        } else if (mapmatrix[y][x] === 2) {
                                var text = document.createElementNS(xmlns, 'text');
                                text.setAttribute('id', 'text' + tileID);
                                text.innerHTML = 'D';
                                text.setAttribute('x', x * 50);
                                text.setAttribute('y', y * 50);
                                svg.appendChild(text);
                                tileID++;
                        }  else if (mapmatrix[y][x] === 3) {
                                var text = document.createElementNS(xmlns, 'text');
                                text.setAttribute('id', 'text' + tileID);
                                text.innerHTML = 'I';
                                text.setAttribute('x', x * 50);
                                text.setAttribute('y', y * 50);
                                svg.appendChild(text);
                                tileID++;
                        } else if (mapmatrix[y][x] === 4) {
                                var text = document.createElementNS(xmlns, 'text');
                                text.setAttribute('id', 'text' + tileID);
                                text.innerHTML = 'T';
                                text.setAttribute('x', x * 50);
                                text.setAttribute('y', y * 50);
                                svg.appendChild(text);
                                tileID++;
                        }else if (mapmatrix[y][x] === -1) {
                                init_x = x;
                                init_y = y;
                                var des = document.createElementNS(xmlns, 'clipPath');
                                des.setAttribute('id', 'desPath');
                                var clipRect = document.createElementNS(xmlns, 'rect');
                                clipRect.setAttribute('width', 50);
                                clipRect.setAttribute('height', 50);
                                clipRect.setAttribute('x', x * 50-20);
                                clipRect.setAttribute('y', y * 50-30);
                                des.appendChild(clipRect);
                                svg.appendChild(des);

                                var desImage = document.createElementNS(xmlns, 'image');
                                desImage.setAttribute('id', 'bird');
                                desImage.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
                                        '../res8/bird.png');
                                desImage.setAttribute('height', 50);
                                desImage.setAttribute('width', 50);
                                desImage.setAttribute('x', x * 50-20);
                                desImage.setAttribute('y', y * 50-30);
                                desImage.setAttribute('clip-path', 'url(#desPath)');
                                svg.appendChild(desImage);
                        }
                }
        }
}
drawMap();

/*
        Add the animation of the bird.
*/
var t1 = new TimelineLite();
var desx = init_x;
var desy = init_y;
var win = false;
function moveForward() {
        // console.log(dir);
        // console.log(desx);
        // console.log(desy);
        // console.log(mapmatrix[desx][desy]);
        var bird = document.getElementById("bird");
        if (dir === 1 && mapmatrix[desy][desx + 1] != 0) {
                if (mapmatrix[desy][desx + 1] === 4) {
                        win = true;
                }
                desx++;
                t1.add(TweenLite.to(bird, 0.5, { x: "+=50" }));
        } else if (dir === 2 && mapmatrix[desy + 1][desx] != 0) {
                if (mapmatrix[desy + 1][desx] === 4) {
                        win = true;
                }
                desy++;
                t1.add(TweenLite.to(bird, 0.5, { y: "+=50" }));
        } else if (dir === 3 && mapmatrix[desy][desx - 1] != 0) {
                if (mapmatrix[desy][desx - 1] === 4) {
                        win = true;
                }
                desx--;
                t1.add(TweenLite.to(bird, 0.5, { x: "-=50" }));
        } else if (dir === 0 && mapmatrix[desy - 1][desx] != 0) {
                if (mapmatrix[desy - 1][desx] === 4) {
                        win = true;
                }
                desy--;
                t1.add(TweenLite.to(bird, 0.5, { y: "-=50" }));
        } else {
                alert("Error");
        }
}

function moveRight() {
        dir = 1;
        var bird = document.getElementById("bird");
        //t1.add(TweenLite.to(bird,0.5,{rotation:-90, transformOrigin:"50%, 50%"}));
        moveForward();
}

function moveLeft() {
        dir = 3;
        var bird = document.getElementById("bird");
        //t1.add(TweenLite.to(bird,0.5,{rotation:-90, transformOrigin:"50%, 50%"}));
        moveForward();
}

function moveUp() {
        dir = 0;
        var bird = document.getElementById("bird");
        //t1.add(TweenLite.to(bird,0.5,{rotation:90, transformOrigin:"50%, 50%"}));
        moveForward();
}

function moveDown() {
        dir = 2;
        var bird = document.getElementById("bird");
        //t1.add(TweenLite.to(bird,0.5,{rotation:90, transformOrigin:"50%, 50%"}));
        moveForward();
}

function runButtonClick() {
        var code = Blockly.JavaScript.workspaceToCode(workspace);
        console.log(code);
        Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
        try {
                alert(code);
                eval(code);
                setTimeout(check_win, 2000);
        } catch (e) {
                alert(e);
        }
}

function check_win() {
        if (win) {
                var t = confirm("恭喜你通过本关，是否进行下一关？");
                if (t) {
                        window.location.href = "course1-8-7.html";
                }
        }
        else {
                document.getElementById("hint").innerHTML = "继续编码！有些地方还不完全正确。";
        }
}

function reset() {
        dir = 1;
        desx = init_x;
        desy = init_y;
}